<template>
    <div class="container scopClass">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- <el-tab-pane label="地块" name="地块">
                <el-row style="margin: 20px 0">
                    <el-col :span="7">
                        <el-input style="border-radius: 0 5px 5px 0; width: 300px" placeholder="请输入关键词" v-model="searchName1">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <el-button slot="append" @click="handleSearch1">搜索</el-button>
                        </el-input>
                    </el-col>

                    <el-button type="primary" style="float: right; margin-right: 10px" @click="addplot" v-if="!added">新增地块</el-button>
                </el-row>
                <el-table :data="tableData1" border ref="multipleTable" header-cell-class-name="table-header">
                    <el-table-column prop="name" sortable label="地块名称"></el-table-column>
                    <el-table-column prop="area" sortable label="面积">
                        <template slot-scope="scope">
                            <span>{{ scope.row.area }}</span>
                            <span style="margin-left: 4px">亩</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="peasantName" sortable label="农户"></el-table-column>
                    <el-table-column prop="principalName" sortable label="管理员"></el-table-column>
                    <el-table-column prop="stateful" sortable label="状态"></el-table-column>
                    <el-table-column prop="pName" sortable label="所属基地"></el-table-column>
                    <el-table-column label="操作" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                type="text"
                                @click="handleView(scope.$index, scope.row)"
                            >查看</el-button>
                            <el-button v-if="!lotCode" type="text" @click="handleYard(scope.$index, scope.row)">地块码</el-button>

                            <el-button type="text" style="color: red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    :page-size="pagesize1"
                    @current-change="handleCurrentChange1"
                    :total="total1"
                    :current-page.sync="currentPage1"
                    style="margin-top: 20px"
                ></el-pagination>
            </el-tab-pane> -->
            <el-tab-pane label="仓库" name="仓库">
                <el-row style="margin: 20px 0">
                    <el-col :span="7">
                        <el-input style="border-radius: 0 5px 5px 0; width: 300px" placeholder="请输入关键词" v-model="searchName2">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <el-button slot="append" @click="handleSearch2">搜索</el-button>
                        </el-input>
                    </el-col>

                    <el-button type="primary" v-if="!added" style="float: right; margin-right: 10px" @click="addwarehouse"
                        >新增仓库</el-button
                    >
                </el-row>
                <el-table :data="tableData2" border ref="multipleTable" header-cell-class-name="table-header">
                    <el-table-column prop="name" sortable label="货位名称"></el-table-column>
                    <el-table-column prop="area" sortable label="所属仓库">
                        <template slot-scope="scope">
                            <span>{{ scope.row.area }}</span>
                            <span style="margin-left: 4px">亩</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="materialCode" sortable label="所属基地"></el-table-column>
                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <el-button v-if="!edit" type="text" @click="handleEditck(scope.$index, scope.row)">编辑</el-button>
                            <el-button v-if="!binCode" type="text" @click="handleView(scope.$index, scope.row)">仓位码</el-button>
                            <el-button type="text" style="color: red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    :page-size="pagesize2"
                    @current-change="handleCurrentChange2"
                    :total="total2"
                    :current-page.sync="currentPage2"
                    style="margin-top: 20px"
                ></el-pagination>
            </el-tab-pane>
            <el-tab-pane label="建筑" name="建筑">
                <el-row style="margin: 20px 0">
                    <el-col :span="7">
                        <el-input style="border-radius: 0 5px 5px 0; width: 300px" placeholder="请输入关键词" v-model="searchName3">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <el-button slot="append" @click="handleSearch3">搜索</el-button>
                        </el-input>
                    </el-col>

                    <el-button type="primary" v-if="!added" style="float: right; margin-right: 10px" @click="architecture"
                        >新增建筑</el-button
                    >
                </el-row>
                <el-table :data="tableData3" border ref="multipleTable" header-cell-class-name="table-header">
                    <el-table-column prop="name" sortable label="建筑名称"></el-table-column>
                    <el-table-column prop="area" sortable label="面积">
                        <template slot-scope="scope">
                            <span>{{ scope.row.area }}</span>
                            <span style="margin-left: 4px">亩</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="materialCode" sortable label="所属基地"></el-table-column>

                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <el-button v-if="!edit" type="text" @click="handleEditjz(scope.$index, scope.row)">编辑</el-button>

                            <el-button type="text" style="color: red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    :page-size="pagesize3"
                    @current-change="handleCurrentChange3"
                    :total="total3"
                    :current-page.sync="currentPage3"
                    style="margin-top: 20px"
                ></el-pagination>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="二维码边长（cm）" width="150"></el-table-column>
                <el-table-column property="name" label="建议扫描距离（米）" width="200"></el-table-column>
                <el-table-column property="address" label="下载链接"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { base_findByList, base_delete,} from '@/request/api';
export default {
    data() {
        return {
            gridData: [],
            dialogTableVisible: false,
            activeName: '仓库',
            searchName1: '',
            searchName2: '',
            searchName3: '',
            tableData1: [],
            tableData2: [],
            tableData3: [],
            total1: 0,
            currentPage1: 1,
            pagesize1: 10,
            total2: 0,
            currentPage2: 1,
            pagesize2: 10,
            total3: 0,
            currentPage3: 1,
            pagesize3: 10,

            listUrl: '',
            action: '',
            added: true,
            lotCode: true,
            edit: true,
            binCode: true,
            id: ''
        };
    },
    created() {},
    mounted() {
        this.init1();
        this.init2();
        this.init3();
        this.judgmentAuthority();
    },
    destroyed: function () {},
    methods: {
        architecture() {
            this.$router.push({
                path: '/digitalMap',
                query: { type: 4 }
            });
        },
        addwarehouse() {
            this.$router.push({
                path: '/digitalMap',
                query: { type: 3 }
            });
        },
        //新增地块
        addplot() {
            this.$router.push({
                path: '/digitalMap',
                query: { type: 2 }
            });
        },
        handleYard() {
            this.dialogTableVisible = true;
        },
        init1() {
            let data = {
                page: this.currentPage1,
                type: '2',
                name: this.searchName1
            };
            base_findByList(data).then((res) => {
                this.tableData1 = res.rows;
                this.total1 = res.total;
                var _this = this;
                for (let i = 0; i < this.tableData1.length; i++) {
                    if (this.tableData1[i].state == 0) {
                        _this.tableData1[i].stateful = '休耕';
                    } else {
                        _this.tableData1[i].stateful = '种植中';
                    }
                }
            });
        },
        init2() {
            let data = {
                page: this.currentPage1,
                type: '3',
                name: this.searchName2
            };
            base_findByList(data).then((res) => {
                this.tableData2 = res.rows;
                this.total2 = res.total;
                var _this = this;
                // for (let i = 0; i < this.tableData.length; i++) {
                //     if(this.tableData[i].state == 0){
                //         _this.tableData[i].stateful = "休耕"
                //     }else{
                //         _this.tableData[i].stateful = "种植中"
                //     }

                // }
            });
        },
        init3() {
            let data = {
                page: this.currentPage1,
                type: '4',
                name: this.searchName3
            };
            base_findByList(data).then((res) => {
                this.tableData3 = res.rows;
                this.total3 = res.total;
                var _this = this;
                // for (let i = 0; i < this.tableData.length; i++) {
                //     if(this.tableData[i].state == 0){
                //         _this.tableData[i].stateful = "休耕"
                //     }else{
                //         _this.tableData[i].stateful = "种植中"
                //     }

                // }
            });
        },

        // tabs
        handleClick(tab, event) {},
        //编辑地块
        handleEdit(index, row) {
            this.$router.push({
                path: '/digitalMap',
                query: { id: row.id, type: '2', isshow: true }
            });
        },
        //编辑仓库
        handleEditck(index, row) {
            this.$router.push({
                path: '/digitalMap',
                query: { id: row.id, type: '3', isshow: true  }
            });
        },
        //编辑建筑
        handleEditjz(index, row) {
            this.$router.push({
                path: '/digitalMap',
                query: { id: row.id, type: '4', isshow: true}
            });
        },
        // 查看
        handleView(index, row) {},
        // 删除
        handleDelete(index, row) {
            // console.log(row.id)
            base_delete(row.id).then((res) => {
                this.$notify({
                    title: '提示',
                    message: '删除成功',
                    type: 'success'
                });
                this.init1();
                this.init2();
                this.init3();
            });
        },

        // 列表搜索
        handleSearch1() {
            this.currentPage1 = 1;
            this.init1();
        },
        handleSearch2() {
            this.currentPage2 = 1;
            this.init2();
        },
        handleSearch3() {
            this.currentPage3 = 1;
            this.init3();
        },

        // 分页事件
        handleCurrentChange1(val) {
            this.currentPage1 = val;
            this.init1();
        },
        handleCurrentChange2(val) {
            this.currentPage2 = val;
            this.init2();
        },
        handleCurrentChange3(val) {
            this.currentPage3 = val;
            this.init3();
        },

        uploadonchange(file) {},
        //判定操作按钮显示
        judgmentAuthority() {
            var type = JSON.parse(localStorage.getItem('panduanzhuangtai'));
                type.map((item1) => {
                    if (item1.name == '基地管理' && item1.children != null) {
                        for (var i = 0; i < item1.children.length; i++) {
                            if (item1.children[i].name == '新增') this.added = false;
                            if (item1.children[i].name == '编辑') this.edit = false;
                            if (item1.children[i].name == '地块码') this.lotCode = false;
                            if (item1.children[i].name == '仓位码') this.binCode = false;
                        }
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
// 深度作用器
/deep/.upload-daoru {
    .el-upload {
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px;
    }
}
.el-col {
    margin-bottom: 0;
}
/* .scopClass .el-table{ margin-top: 20px;} */
.el-pagination {
    text-align: center;
}
/*
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
} */
</style>
